<template>
    <div>
        <head-view class="headerView" headLeft>
            <template #headLeft>
                <div class="w-100 fr-ac">
                    <div class="fs-12 item fr-ac">
                        <div>{{ userStore.user.crowd }}</div>
                        <div>--</div>
                        <div>{{ userStore.user.nickname }}</div>
                    </div>
                    <div class="fr-ac flex-1 fs-12">
                        <div
                            v-for="item in list"
                            :key="item.id"
                            class="item ellipsis-1 bold-3"
                            :class="route.path == item.path ? 'itemActive' : ''"
                            @click="toClick(item)"
                        >
                            {{ item.title }}
                        </div>
                    </div>
                </div>
            </template>
        </head-view>
        <router-view></router-view>
    </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useUserStore } from "@/store/userStore";
import { useRoute, useRouter } from "vue-router";
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const list = ref([]);
const toClick = (val) => {
    if (val.id == 7) {
        router.replace({ path: val.path })
        userStore.clearInfo()
    } else {
        router.push(val.path)
        document.title = val.title;
    }
}
onMounted(() => {
    list.value = userStore.tabList
    const title=list.value.filter(item=>item.path==route.path)
    document.title = title[0].title;
});
</script>
<style lang="scss" scoped>
.headerView {
    background: url(@/assets/header.jpg) no-repeat;
    background-size: cover;
    color: #fff;
    .item {
        margin: 0 2%;
        cursor: pointer;
    }
    .itemActive {
        background: #fff;
        color: #000;
        padding: 0.5rem 1.5rem;
        border-radius: 30px;
    }
}
</style>